<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script>
        function f1(){
            let btn = document.getElementById("btn");
            // 取值
            console.log("type属性:"+btn.type);
            console.log("value属性:"+btn.value);
            console.log("id属性:"+btn.id);
            console.log("onclick属性:"+btn.onclick);
            // 无法访问自定义属性
            console.log("自定义属性:"+btn.a);

            // 重新赋值
            // 通过改变DOM属性的值从而达到改变与之对应的HTML属性值
            // 改变后页面会重新渲染
            btn.value="改变后的value";
            btn['type'] = "text";
        }
        function f2(){
            let btn = document.getElementById("btn2");
            // 获取HTML属性
            console.log("type属性:"+btn.getAttribute("type"));
            console.log("value属性:"+btn.getAttribute("value"));
            console.log("自定义属性:"+btn.getAttribute("a"));

            // 重新赋值
            btn.setAttribute("value","改变后的value");
            btn.setAttribute("a","aaa");
        }
    </script>
</head>
<body>
<input type="button" value="访问DOM属性" id="btn" onclick="f1()" a="b"><br>
<input type="button" value="访问HTML属性" id="btn2" onclick="f2()" a="b"><br>

</body>
</html>